<template>
    <div class="rightOne">
        <ThemeTitlenew :title="title" />
        <div class="wordDec">
            <div class="population">
                <span>截止2020年海南省人口总数：</span>
                <span id="fontcolor"
                    @click="renkouTotal"
                    >1051.958</span
                >
                <span>万人</span>
            </div>
            <!-- <div class="port">
                <div class="enterPort">
                    <span>今日进港：</span>
                    <span>暂无</span>
                    <span>人</span>
                </div>
                <div class="leavePort">
                    <span>今日离港：</span>
                    <span>暂无</span>
                    <span>人</span>
                </div>
            </div> -->
        </div>
        <div id="allCityPopulation"></div>
        <el-carousel class="elCarousel" height="160px">
            <el-carousel-item>
                <div id="populationChart"></div>
            </el-carousel-item>
            <el-carousel-item>
                <div id="populationCityChart"></div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
import ThemeTitlenew from "../../common/ThemeTitlenew";
import {
    onMounted,
    ref,
    provide,
    watch,
    reactive,
    onBeforeUnmount,
    nextTick,
} from "vue";
import axios from "axios";
import echarts from "echarts";
import { useStore } from "vuex";
export default {
    name: "HngkRightOne1",
    components: {
        ThemeTitlenew,
    },
    props: {
        countByCity: Array,
        countTotal: Object,
    },
    setup(props, context) {
        // var salvProName =["安徽省","河南省","浙江省","湖北省","贵州省","江西省","江苏省","四川省","云南省","湖南省"];
        // var salvProValue =[239,181,154,144,135,117,74,72,67,55];
        const title = provide("title", "人口统计");
        const store = useStore();
        let val = reactive([]);
        let isRenkou = ref(false);
        const cityCenter = {
            海口市: [110.198418, 20.045805],
            三亚市: [109.511709, 18.252865],
            三沙市: [112.234483, 16.774644],
            儋州市: [109.580812, 19.520948],
            五指山市: [109.516784, 18.774827],
            文昌市: [110.797473, 19.544234],
            琼海市: [110.474524, 19.259112],
            万宁市: [110.392605, 18.793697],
            东方市: [108.651829, 19.095187],
            定安县: [110.358001, 19.681215],
            屯昌县: [110.101667, 19.351662],
            澄迈县: [110.007497, 19.738885],
            临高县: [109.690508, 19.912025],
            白沙黎族自治县: [109.4429, 19.221641],
            昌江黎族自治县: [109.055783, 19.298139],
            乐东黎族自治县: [109.173384, 18.750063],
            陵水黎族自治县: [110.037553, 18.506045],
            保亭黎族苗族自治县: [109.700373, 18.640156],
            琼中黎族苗族自治县: [109.838389, 19.033369],
        };
        let myChart1 = null;
        let myChart2 = null;
        function drawChart1(salvProName, salvProValue, el) {
            let dom = document.getElementById(el);
            myChart1 = echarts.init(dom);
            var salvProName = salvProName;
            var salvProValue = salvProValue;
            var salvProMax = []; //背景按最大值
            for (let i = 0; i < salvProValue.length; i++) {
                salvProMax.push(salvProValue[0]);
            }
            let option = {
                grid: {
                    left: "0%",
                    right: "2%",
                    bottom: "-5%",
                    top: "4%",
                    containLabel: true,
                },
                xAxis: {
                    show: false,
                    type: "value",
                },
                yAxis: [
                    {
                        type: "category",
                        inverse: true,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#fff",
                                fontSize: "8",
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        data: salvProName,
                    },
                    {
                        type: "category",
                        inverse: true,
                        axisTick: "none",
                        axisLine: "none",
                        show: true,
                        axisLabel: {
                            textStyle: {
                                color: "#ffffff",
                                fontSize: "10",
                            },
                        },
                        data: salvProValue,
                    },
                ],
                series: [
                    {
                        name: "值",
                        type: "bar",
                        zlevel: 1,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 30,
                                color: "#00E5FD",
                                //  echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                //     offset: 0,
                                //     color: 'rgba(57,89,255,1)'
                                // }, {
                                //     offset: 1,
                                //     color: 'rgba(46,200,207,1)'
                                // }]),
                            },
                        },
                        barWidth: 7,
                        data: salvProValue,
                    },
                    {
                        name: "背景",
                        type: "bar",
                        barWidth: 7,
                        barGap: "-100%",
                        data: salvProMax,
                        itemStyle: {
                            normal: {
                                color: "rgba(24,31,68,1)",
                                barBorderRadius: 30,
                            },
                        },
                    },
                ],
            };
            myChart1.setOption(option);
            window.addEventListener("resize", () => {
                myChart1.resize();
            });
        }
        function drawChart2(salvProName, salvProValue, el) {
            let dom = document.getElementById(el);
            myChart2 = echarts.init(dom);
            var salvProName = salvProName;
            var salvProValue = salvProValue;
            var salvProMax = []; //背景按最大值
            for (let i = 0; i < salvProValue.length; i++) {
                salvProMax.push(salvProValue[0]);
            }
            let option = {
                grid: {
                    left: "2%",
                    right: "2%",
                    bottom: "-5%",
                    top: "4%",
                    containLabel: true,
                },
                xAxis: {
                    show: false,
                    type: "value",
                },
                yAxis: [
                    {
                        type: "category",
                        inverse: true,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#fff",
                                fontSize: "8",
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        data: salvProName,
                    },
                    {
                        type: "category",
                        inverse: true,
                        axisTick: "none",
                        axisLine: "none",
                        show: true,
                        axisLabel: {
                            textStyle: {
                                color: "#ffffff",
                                fontSize: "10",
                            },
                        },
                        data: salvProValue,
                    },
                ],
                series: [
                    {
                        name: "值",
                        type: "bar",
                        zlevel: 1,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 30,
                                color: "#00E5FD",
                                //  echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                //     offset: 0,
                                //     color: 'rgba(57,89,255,1)'
                                // }, {
                                //     offset: 1,
                                //     color: 'rgba(46,200,207,1)'
                                // }]),
                            },
                        },
                        barWidth: 5,
                        data: salvProValue,
                    },
                    {
                        name: "背景",
                        type: "bar",
                        barWidth: 5,
                        barGap: "-100%",
                        data: salvProMax,
                        itemStyle: {
                            normal: {
                                color: "rgba(24,31,68,1)",
                                barBorderRadius: 30,
                            },
                        },
                    },
                ],
            };
            myChart2.setOption(option);
            window.addEventListener("resize", () => {
                myChart2.resize();
            });
        }
        // const columnList = computed(() => {
        //     return props.list
        // })
        watch(
            () => props.countByCity,
            (newValue) => {
                let countByCity = newValue.sort((a, b) => {
                    return b.value - a.value;
                });
                let countList = countByCity.map((item) => {
                    return item.value;
                });
                let cityList = countByCity.map((item) => {
                    return item.name;
                });
                drawChart1(cityList, countList, "allCityPopulation");
                drawChart1(
                    cityList.slice(0, 10),
                    countList.slice(0, 10),
                    "populationChart"
                );
                drawChart2(
                    cityList.slice(10, -1),
                    countList.slice(10, -1),
                    "populationCityChart"
                );
                val = newValue;
            }
        );
        function renkouTotal() {
            store.commit("changeDescShow", false);
            layerManager.removeAll();
            // isRenkou.value = !isRenkou.value
            // if(isRenkou.value){
            var fontcon = document.getElementById("fontcolor")
            console.log(fontcon)
            fontcon.style.
            axios.get("./data/geojson/海南省.json").then((res) => {
                let datas = res.data.features;
                val.push({ name: "三沙市", value: 0 });
                // val.sort((a,b)=>{return a-b})
                datas.forEach((element, index) => {
                    //this.$cp.addPloygonLine("xiangjie"+index,[].concat.apply([], element.geometry.coordinates[0][0]), Cesium.Color.WHITE)Cesium.Color.fromCssColorString("#204789"),
                    layerManager.addPloygon(
                        "shijie" + index,
                        [].concat.apply([], element.geometry.coordinates[0][0]),
                        parseInt(val[index].value * 0),
                        index,
                        "leftClick",
                        // pLeftClick
                    );
                });
                val.forEach((item, index) => {
                    layerManager.addOnlyLabel(
                        "xiangzhen" + index,
                        cityCenter[item.name],
                        parseInt(item.value * 0) + 300,
                        item.name + "\n(" + item.value + "人)",
                        "leftClick",
                        lLeftClick
                    );
                });
                layerManager.fly(
                    109.81718500012782,
                    19.345261718452747,
                    474882,
                    6.237318703147128,
                    -1.5704875459600833,
                    0
                );
            });
            // }else{
            //     layerManager.removeAll();
            // }
        }
        function pLeftClick() {}
        function lLeftClick() {}
        onBeforeUnmount(() => {
            if (myChart1) {
                echarts.dispose(myChart1);
            }
            if (myChart2) {
                echarts.dispose(myChart2);
            }
        });
        onMounted(() => {
            // drawChart()
            // drawChart1()
        });
        return {
            title,
            renkouTotal,
            isRenkou,
        };
    },
};
</script>
<style lang="stylus">
.elCarousel .el-carousel__indicators--horizontal {
    display: none;
}
</style>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .rightOne {
        .wordDec {
            font-weight: bold;
            padding-top: vh(15);
            padding-left: vw(15);
            letter-spacing: vw(1);

            .population {
                span:nth-child(1) {
                    color: #fff;
                    font-size: vw(12);
                    letter-spacing: vw(1);
                }

                span:nth-child(2) {
                    // color: #0090FF;
                    color:#fffff;
                    font-size: vw(18);
                    cursor: pointer;
                }

                span.renkouActive {
                    font-size: vw(20);
                }

                span:nth-child(3) {
                    color:#fffff;
                    font-size: vw(12);
                }
            }

            .port {
                display: flex;
                margin-top: vh(12);

                .enterPort {
                    span:nth-child(1) {
                        color: #fff;
                        font-size: vw(12);
                        letter-spacing: vw(1);
                    }

                    span:nth-child(2) {
                        color: #00E5FD;
                        font-size: vw(18);
                    }

                    span:nth-child(3) {
                        color: #00E5FD;
                        font-size: vw(12);
                    }
                }

                .leavePort {
                    margin-left: vw(60);

                    span:nth-child(1) {
                        color: #fff;
                        font-size: vw(12);
                        letter-spacing: vw(1);
                    }

                    span:nth-child(2) {
                        color: #FFBC32;
                        font-size: vw(18);
                    }

                    span:nth-child(3) {
                        color: #FFBC32;
                        font-size: vw(12);
                    }
                }
            }
        }

        .elCarousel {
            margin-bottom: vh(15);

            #populationChart {
                margin-top: vh(13);
                width: 364px;
                height: 160px;
            }

            #populationCityChart {
                margin-top: vh(13);
                width: 364px;
                height: 160px;
            }
        }

        #allCityPopulation {
            display: none;
            width: 364px;
            height: 160px;
        }
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .rightOne {
        height: vh(605);

        .wordDec {
            font-weight: bold;
            padding-top: vh(15);
            padding-left: vw1(15);
            letter-spacing: vw1(1);

            .population {
                span:nth-child(1) {
                    color: #fff;
                    font-size: vw1(17);
                    letter-spacing: vw1(1);
                }

                span:nth-child(2) {
                    color: #0090FF;
                    font-size: vw1(21);
                    cursor: pointer;
                }

                span.renkouActive {
                    font-size: vw1(22);
                }

                span:nth-child(3) {
                    color: #0090FF;
                    font-size: vw1(17);
                }
            }

            .port {
                display: flex;
                margin-top: vh(12);

                .enterPort {
                    span:nth-child(1) {
                        color: #fff;
                        font-size: vw1(12);
                        letter-spacing: vw1(1);
                    }

                    span:nth-child(2) {
                        color: #00E5FD;
                        font-size: vw1(18);
                    }

                    span:nth-child(3) {
                        color: #00E5FD;
                        font-size: vw1(12);
                    }
                }

                .leavePort {
                    margin-left: vw1(60);

                    span:nth-child(1) {
                        color: #fff;
                        font-size: vw1(12);
                        letter-spacing: vw1(1);
                    }

                    span:nth-child(2) {
                        color: #FFBC32;
                        font-size: vw1(18);
                    }

                    span:nth-child(3) {
                        color: #FFBC32;
                        font-size: vw1(12);
                    }
                }
            }
        }

        .elCarousel {
            display: none;
            margin-bottom: vh(15);

            #populationChart {
                margin-top: vh(13);
                width: vw1(414);
                height: vh(160);
            }

            #populationCityChart {
                margin-top: vh(13);
                width: vw1(414);
                height: vh(160);
            }
        }

        #allCityPopulation {
            width: vw1(414);
            height: vh(450);
            margin-bottom: vh(15);
            margin-top: vh(15);
        }
    }
}
</style>